import React, { Component } from "react";
import categoryService from "../service/category.service";
import CategoryModel from "../model/category.model";
import { PagerInterface } from "../service/base.service";
import { Table, Icon } from "antd";
import  menuMgr from '../menu';
import { FormHelper } from "../form-helper";
import Category from "./category";

export interface IState { 
    pager: PagerInterface<CategoryModel> | undefined;
}

export default class CategoryList extends Component { 

    state = {
        pager: undefined,
    }

    async componentDidMount() { 
        this.setState({
            pager: await categoryService.find(0, 20, {})
        });
    }
    onEdit = (record: any) => {
        let category = new CategoryModel();
        category.id = record.id;
        category.name = record.name;
        category.type = record.type;
        menuMgr.gotoComponent(<Category model={category} name="edit-category"></Category>);
    }

    render() { 
        let datasource = this.state.pager && (this.state.pager as unknown as PagerInterface<CategoryModel>).items;
        let columns = [
            {
                title: 'ID',
                key: 'id',
                dataIndex: 'id'
            },
            {
                title: '名称',
                key: 'name',
                dataIndex: 'name'
            },
            {
                title: '类型',
                key: 'type',
                dataIndex: 'type'
            },
            {
                title: '操作',
                key: 'operate',
                render: (text: string, record: any) => {
                    return (
                        <span>
                            <a onClick={() => this.onEdit(record)}><Icon type="edit" title="编辑"/>编辑</a>
                                &nbsp;&nbsp;
                            <a><Icon type="delete" title="删除" />删除</a>
                        </span>
                    )
                }
            }
        ]
        return (<Table rowKey="id" dataSource={datasource} columns={columns}></Table>)
    }
}